<script setup lang="ts">
import { $t } from '@/locales';
import { useRoute } from 'vue-router';
import { computed } from 'vue';

defineOptions({ name: 'GlobalLogo' });

interface Props {
  /** Whether to show the title */
  showTitle?: boolean;
}

withDefaults(defineProps<Props>(), {
  showTitle: true
});

const route = useRoute();

// 判断当前是否在客户端路由
const isClientRoute = computed(() => route.path.startsWith('/client'));

// 判断logo应该跳转到哪个路由
const logoLink = computed(() => isClientRoute.value ? '/' : '/client/home');
</script>

<template>
  <RouterLink :to="logoLink" class="w-full flex-center nowrap-hidden">
    <SystemLogo class="text-32px text-primary" />
    <h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
      {{ $t('system.title') }}
    </h2>
  </RouterLink>
</template>

<style scoped></style>
